<template>
  <div class="app-container">
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.name"
          clearable
          size="small"
          prefix-icon="el-icon-search"
          placeholder="输入账号/工号、姓名搜索"
          style="width: 220px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />

        <el-select v-model="query.deptName1" filterable clearable size="small" placeholder="云工场-公司" class="filter-item" style="width: 140px" @change="crud.toQuery">
          <el-option
            v-for="item in deptList1"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="query.enabled" filterable clearable size="small" placeholder="云工场-状态" class="filter-item" style="width: 140px" @change="crud.toQuery">
          <el-option
            v-for="item in statusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select v-model="query.deptName2" filterable clearable size="small" placeholder="OA-公司" class="filter-item" style="width: 140px" @change="crud.toQuery">
          <el-option
            v-for="item in deptList2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>

        <el-select v-model="query.idtUserStatus" filterable clearable size="small" placeholder="OA-状态" class="filter-item" style="width: 140px" @change="crud.toQuery">
          <el-option
            v-for="item in idtUserStatusList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <rrOperation />
      </div>
      <crudOperation :permission="permission" />
    </div>

    <!--表格渲染-->
    <el-table ref="table" v-loading="crud.loading" stripe height="calc(100vh - 310px)" :data="crud.data" style="width: 100%;" @selection-change="crud.selectionChangeHandler">
      <el-table-column :show-overflow-tooltip="true" prop="username" label="账号/工号" sortable />
      <el-table-column :show-overflow-tooltip="true" prop="nick_name" label="姓名" />
      <el-table-column :show-overflow-tooltip="true" prop="dept_name1" label="云工场-公司" />
      <el-table-column :show-overflow-tooltip="true" prop="enabled" :formatter="formatterStatus" label="云工场-状态" />
      <el-table-column :show-overflow-tooltip="true" prop="dept_name2" label="OA-公司" />
      <el-table-column :show-overflow-tooltip="true" prop="idt_user__status" :formatter="formatterIdtStatus" label="OA-状态" />
      <el-table-column
        label="操作"
        width="220"
        align="center"
      >
        <!--<template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
            :disabled-dle="scope.row.id === user.id"
          >

          </udOperation>
        </template>-->
      </el-table-column>
    </el-table>
    <pagination />

  </div>
</template>

<script>
import { checkUserDepts, checkUserOaDepts } from '@/api/system/user'
import CRUD, { presenter, header, crud } from '@brotherCrud/crud'
import rrOperation from '@brotherCrud/RR.operation'
import crudOperation from '@brotherCrud/CRUD.operation'
import pagination from '@brotherCrud/Pagination'
export default {
  name: 'User',
  components: { rrOperation, crudOperation, pagination },
  cruds() {
    return CRUD({ title: '人事变动管理', url: 'api/users/checkUserInfo',
      optShow: {
        add: false,
        edit: false,
        del: false,
        download: false,
        reset: true
      },
      sort: '',
      crudMethod: {}
    })
  },
  mixins: [presenter(), header(), crud()],
  // 数据字典
  data() {
    return {

      deptList1: [],
      deptList2: [],
      statusList: [
        { label: '禁用', value: 0 },
        { label: '激活', value: 1 }
      ],
      idtUserStatusList: [ // OA状态
        { label: '停用', value: 0 },
        { label: '正常', value: 1 },
        { label: '密码错误锁定', value: 2 },
        { label: '管理员强制锁定', value: 3 }
      ],

      permission: {
        download: ['admin', 'user:download']
      }

    }
  },

  created() {
    this.getCompany()
  },
  mounted: function() {},
  methods: {
    getCompany() {
      checkUserDepts().then(res => {
        this.deptList1 = Array.isArray(res) ? res.map(item => ({
          label: item.dept_name1,
          value: item.dept_name1
        })) : []
      })

      checkUserOaDepts().then(res => {
        this.deptList2 = Array.isArray(res) ? res.map(item => ({
          label: item.dept_name2,
          value: item.dept_name2
        })) : []
      })
    },
    formatterStatus(row, n, v) {
      return v === 1 ? '激活' : '禁用'
    },
    formatterIdtStatus(row, n, v) {
      const item = this.idtUserStatusList.find(item => item.value === v)
      return item?.label
    }

  }
}
</script>

